<template>
  <div>
    <a-collapse defaultActiveKey="1">
      <a-collapse-panel key="1" :header="t('画布配置')">
        <a-space class="flex justify-between" fill>
          <div>{{ t('背景颜色') }}</div>
          <ColorPicker
            v-model="stageConfig.backgroundColor"
            @change="(color: any) => (currentStage.backgroundColor = color)"
          ></ColorPicker>
        </a-space>
        <a-card v-if="stageConfig.lcd" :bordered="false" :body-style="{ padding: '0' }">
          <div class="flex gap-x-4 mt-12">
            <a-input-number v-model:value="stageConfig.w" @change="changeWidth">
              <template #prefix>W</template>
            </a-input-number>
            <a-input-number v-model:value="stageConfig.h" @change="changeHeight">
              <template #prefix>H</template>
            </a-input-number>
          </div>
        </a-card>

        <a-space class="mt-8">
          <a-button @click="setPerfectScale">
            <CopyOutlined />
          </a-button>
          <a-button @click="stageConfig.scale = 1">
            <FontSizeOutlined />
          </a-button>
          <a-button @click="setChildCenter">
            <ReloadOutlined />
          </a-button>
        </a-space>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script lang="ts" setup>
import type { CopyOutlined, FontSizeOutlined } from '@ant-design/icons-vue';
import {
  currentStage,
  setChildCenter,
  setGhostHandle,
  stageConfig,
  setPerfectScale,
} from '../../data/stage';

const { t } = useI18n();
watch(stageConfig.value, () => {
  setGhostHandle(stageConfig.value.ghostHandle);
});
const changeWidth = () => {
  currentStage.value.w = stageConfig.value.w;
};

const changeHeight = () => {
  currentStage.value.h = stageConfig.value.h;
};
</script>
